import React, { useState, useEffect } from 'react';
import { Checkbox, Divider, Button, Row, Col } from 'antd';
import { getMallInfo, postMallInfo, getMallTag } from '@/services/mall/api';
import { MsgType, replaceRichTextImgHost, submitRichTextImgHost, showMsg } from '@/utils/utils';
import RichText from '@/components/RichText'
import BraftEditor from 'braft-editor';
import PermissionControl from '@/components/PermissionControl';
import { imgHostUrl, imgPrefix, imgReg, miniPro } from '@/utils/constants';

const MallInfo: React.FC = () => {
  const [disabled, setDisabled] = useState<boolean>(true);
  const [mallInfo, setMallInfo] = useState<MALLAPI.MallInfo>({} as MALLAPI.MallInfo);
  const [tagList, setTagList] = useState<any[]>([]);
  const [postTagList, setPostTagList] = useState<string[]>([]);
  const [editorState, setEditorState] = useState<any>(BraftEditor.createEditorState(null))
  const [loading, setLoading] = useState<boolean>(false);

  const onPublish = async () => {
    if (disabled) {
      return;
    }
    if (loading) {
      return;
    }
    if (editorState.isEmpty()) {
      showMsg('请填写医院介绍', MsgType.INFO)
      return
    }
    if (!postTagList.length) {
      showMsg('至少启用一个模块', MsgType.INFO)
      return
    }
    try {
      const data: any = {
        hospital_desc: submitRichTextImgHost(editorState.toHTML()),
        tag_ids: postTagList
      }
      setLoading(true);
      await postMallInfo(data);
      showMsg('已生效', MsgType.SUCCESS);
      setDisabled(true);
      setLoading(false);
    } catch (error) {
      showMsg(error?.data?.errmsg);
      setLoading(false);
    }
  }

  // 获取商城信息
  const fetchMallInfo = async () => {
    try {
      const info: MALLAPI.MallInfo = await getMallInfo();
      setMallInfo(info);
      const tags: any[] = [];
      const checkedTags: any[] = [];
      info.tag_list.forEach(tag => {
        tags.push({
          label: tag.tag_name,
          value: tag.tag_id
        });
        if (tag.is_use === 'Y') {
          checkedTags.push(tag.tag_id);
        }
      });
      setTagList(tags);
      setPostTagList(checkedTags);
      info.hospital_desc = replaceRichTextImgHost(info.hospital_desc);
      setEditorState(BraftEditor.createEditorState(info.hospital_desc))
    } catch (error) {
      console.log(error);
      showMsg(error?.data?.errmsg);
    }
  }

  // 商城标签
  const fetchMallTag = async () => {
    try {
      const data: any[] = await getMallTag();
      const checkTags: string[] = data.map(item => {
        return item.tag_id;
      });
      setPostTagList(checkTags);
    } catch (error) {
      showMsg(error?.data?.errmsg);
    }
  }

  useEffect(() => {
    fetchMallInfo();
  }, []);

  return <div className="mall-info">
     <div className="header">
       <div className="title">1.商城信息</div>
       <div className="btns">
        <PermissionControl action_id="500500001">
          <Button style={{marginRight: 10}} onClick={() => setDisabled(false)} type="primary">编辑</Button>
        </PermissionControl>
        <PermissionControl action_id="500500002">
          <Button type="primary" loading={loading} disabled={disabled} onClick={onPublish}>发布</Button>
        </PermissionControl>
      </div>
     </div>
    <Divider style={{margin: '10px 0'}} />
    <div className="info-body">
      <Row className="row">
        <Col span={2}>启用模块:</Col>
        <Col span={22}>
          <Checkbox.Group 
            name="moduel"
            onChange={(checkedValues) => {
              setPostTagList(checkedValues as string[]);
            }} 
            value={postTagList}
            options={tagList} 
            defaultValue={postTagList} 
            disabled={disabled}
          />
        </Col>
      </Row>

      <Row className="row">
        <Col span={2}>医院介绍:</Col>
        <Col span={22}>
          <RichText 
            readOnly={disabled}
            setEditorState={setEditorState} 
            editorState={editorState} />
        </Col>
      </Row>
    </div>
  </div>
}

export default MallInfo;